<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--<link rel="stylesheet" href="css/normalize.min.css">-->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <!--<link rel="stylesheet" href="css/jquery.fancybox.css">-->
    <!--<link rel="stylesheet" href="css/flexslider.css">-->
    <!--<link rel="stylesheet" href="css/styles.css">-->
    <!--<link rel="stylesheet" href="css/queries.css">-->
    <!--<link rel="stylesheet" href="css/etline-font.css">-->
    <!--<link rel="stylesheet" href="bower_components/animate.css/animate.min.css">-->


</head>
<body>

<h2>诊断记录报表</h2>

<div id="tablearea"></div>

<script>
    var request = new XMLHttpRequest();
    request.responseType = 'text';
    request.open('GET', '/api/list');
    request.send();
    request.onload = function () {
        if (request.readyState == 4) {
            resp = this.responseText;
            respJson = JSON.parse(resp);
            console.log(resp);

            var tablearea = document.getElementById('tablearea'),
                    table = document.createElement('table');

            var thead = document.createElement('thead');
            var tr = document.createElement('tr');
            tr.appendChild(document.createElement('td'));
            tr.appendChild(document.createElement('td'));
            tr.appendChild(document.createElement('td'));
            tr.appendChild(document.createElement('td'));
            tr.appendChild(document.createElement('td'));
            tr.appendChild(document.createElement('td'));
            tr.appendChild(document.createElement('td'));

            tr.cells[0].appendChild(document.createTextNode("ID"));
            tr.cells[1].appendChild(document.createTextNode('姓名'));
            tr.cells[2].appendChild(document.createTextNode('年龄'));
            tr.cells[3].appendChild(document.createTextNode('性别'));
            tr.cells[4].appendChild(document.createTextNode('视力'));
            tr.cells[5].appendChild(document.createTextNode('时间'));
            tr.cells[6].appendChild(document.createTextNode('报告'));


            thead.appendChild(tr);
            table.appendChild(thead);

            var tbody = document.createElement('tbody');

            for (var i = 0; i < respJson.length; i++) {
                var tr = document.createElement('tr');

                tr.appendChild(document.createElement('td'));
                tr.appendChild(document.createElement('td'));
                tr.appendChild(document.createElement('td'));
                tr.appendChild(document.createElement('td'));
                tr.appendChild(document.createElement('td'));
                tr.appendChild(document.createElement('td'));
                tr.appendChild(document.createElement('td'));

                tr.cells[0].appendChild(document.createTextNode(respJson[i].ID));
                tr.cells[1].appendChild(document.createTextNode(respJson[i].PatientName));
                tr.cells[2].appendChild(document.createTextNode(respJson[i].PatientAge));
                tr.cells[3].appendChild(document.createTextNode(respJson[i].PatientGender));
                tr.cells[4].appendChild(document.createTextNode(respJson[i].PatientEyesight));
                tr.cells[5].appendChild(document.createTextNode(respJson[i].Created));
                var h = document.createElement('a');
                h.innerHTML = '报告';
                h.href = "/api/image/" + respJson[i].ID + '_report.pdf';
                tr.cells[6].appendChild(h);

                tbody.appendChild(tr);
            }
            table.appendChild(tbody);

            tablearea.appendChild(table);
            $('table').addClass("table");
        }
    }
</script>


<!--<script src="js/jquery.js"></script>-->
<script src="js/vendor/jquery-1.11.2.min.js"></script>
<script src="bower_components/retina.js/dist/retina.js"></script>
<script src="js/jquery.fancybox.pack.js"></script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/scripts.js"></script>
<script src="js/jquery.flexslider-min.js"></script>
<script src="bower_components/classie/classie.js"></script>
<script src="bower_components/jquery-waypoints/lib/jquery.waypoints.min.js"></script>

<script src="js/json2.js"></script>


</body>
</html>